import React, {Component} from 'react';
import {connect} from 'react-redux';
import action from '../../store/actions/specsLibrary';
import {Radio, Button, Popconfirm, message, Form, Input} from 'antd';
import {addspecs, editspecs, delspecs} from '../../api';
import './SingleElection.scss';


class SingleElection extends Component {
  addInputValue = React.createRef();
  editInputValue = React.createRef();
  state = {
    myDisabled: true,
    code: ''
  };

  onChange = e => {
    console.log(e.target.value);
    if (e.target.value) {
      this.setState({
        myDisabled: false,
        code: e.target.value
      });
    } else {
      this.setState({
        myDisabled: true
      });
    }
  };

  confirm = flag => {
    const {pid, GET_SPECSLIBRARY_INFO, specsSelect} = this.props;
    if (flag === 1) {
      const param = this.addInputValue.current.state.value;
      // 增加
      addspecs(param, pid)
        .then(res => {
          GET_SPECSLIBRARY_INFO(specsSelect);
        }).catch(err => {
        console.log(err);
      });
    } else if (flag === 2) {
      // 修改 name, code
      const {code} = this.state;
      const name = this.editInputValue.current.state.value;
      console.log(name, code);
      editspecs(name, code)
        .then(res => {
          GET_SPECSLIBRARY_INFO(specsSelect);
        })
        .catch(err => {
          console.log(err);
        });

    } else {
      // 删除
      const {code} = this.state;
      delspecs(code)
        .then(res => {
          GET_SPECSLIBRARY_INFO(specsSelect);
        })
        .catch(err => {

        });
    }

  };


  cancel = param => {
    const {pid} = this.props;
    console.log(pid, param);
    // message.error('Click on No')
  };

  render() {
    const {arr} = this.props;
    console.log(this.state.myDisabled);
    const {getFieldDecorator} = this.props.form;
    return (
      <div className='SingleElection'>
        <Radio.Group onChange={this.onChange}>
          {arr && arr.map(item => <Radio value={item.id} key={item.id.toString()}>{item.name}</Radio>)}
          <div className='button__z'>
            <Popconfirm
              title={
                <Input placeholder='名称' ref={this.addInputValue}/>
              }
              onConfirm={() => this.confirm(1)}
              onCancel={() => this.cancel()}
              okText="确定"
              cancelText="取消"
            >
              <Button
                size='small'
                type='primary'
              >增加</Button>
            </Popconfirm>

            <Popconfirm
              placement="right"
              title={
                <Input placeholder='名称' ref={this.editInputValue}/>
              }
              onConfirm={() => this.confirm(2)}
              onCancel={() => this.cancel}
              okText="确定"
              cancelText="取消"
            >
              <Button
                size='small'
                disabled={this.state.myDisabled}
              >修改</Button>
            </Popconfirm>

            {/*<Popconfirm*/}
            {/*  placement="right"*/}
            {/*  title="确定要删除该规格么?"*/}
            {/*  onConfirm={() => this.confirm(3)}*/}
            {/*  onCancel={() => this.cancel}*/}
            {/*  okText="确定"*/}
            {/*  cancelText="取消"*/}
            {/*>*/}
            {/*  <Button*/}
            {/*    size='small'*/}
            {/*    type="danger" ghost*/}
            {/*    disabled={this.state.myDisabled}*/}
            {/*  >删除</Button>*/}
            {/*</Popconfirm>*/}

          </div>
        </Radio.Group>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    specsSelect: state.specsLibrary.specsSelect
  };
};
const WrappedNormalLoginForm = Form.create()(SingleElection);   // ant上要求假的 如果不加这句代码就会失效
export default connect(mapStateToProps, action)(WrappedNormalLoginForm);
